<template>
    <div class="fbox">
        <a-form :model="formdata" ref="fref" :labelCol="{span:4}" @finish="tosubmit" :rules="rules">
            <a-form-item name="username" label="用户名" hasFeedback>
                <a-input v-model:value="formdata.username" placeholder="用户名不能小于6位" />
            </a-form-item>
            <a-form-item name="phone" label="手机号" hasFeedback>
                <a-input v-model:value="formdata.phone" placeholder="11位" />
            </a-form-item>
            <a-form-item name="email" label="邮箱" hasFeedback>
                <a-input v-model:value="formdata.email" placeholder="邮箱" />
            </a-form-item>
            <a-form-item name="password" label="密码" hasFeedback>
                <a-input v-model:value="formdata.password" placeholder="不填写默认为：666666" />
            </a-form-item>
            <a-form-item class="text-center">
                <a-button html-type="submit" type="primary">确认添加</a-button>
                <a-button @click="toreset" class="reset">重设</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<style lang="less" scoped>
.fbox{
    padding:15px 10px;

    .reset{
        margin-left:15px;
    }
}
</style>
<script>
import { defineComponent, reactive,ref, toRaw } from 'vue'
import { useradd } from '@/api/user';
import { message } from 'ant-design-vue';

export default defineComponent({
    setup(props,context) {
        const formdata=reactive({
            username:'',
            phone:'',
            email:'',
            password:'',            
        });

        const fref=ref();

        const checkphone=async (_rules,value) =>{
            if(value.length!=11){
                return Promise.reject('手机号不正确');
            }
            if(value.substr(0,1)!=1){
                return Promise.reject('手机号不正确');
            }

            let reg=/[a-z#@]/i;
            if(reg.test(value)){
                return Promise.reject('手机号不正确');
            }

            return Promise.resolve();

        };

        const checkname = async(_rules,value) => {
            if(value.length<6){
             return    Promise.reject('不能小于6位');
            }
            return Promise.resolve();
        };

        const rules={
          phone:[{required:true,validator:checkphone,trigger:'blur'}],
          username:[{required:true,validator:checkname,trigger:'blur'}]

        };

        const tosubmit= () =>{
            let obj=toRaw(formdata);
            if(!obj.password){
                obj.password='666666';
            }

            useradd(obj).then(
                res=>{
                    if(res.data['code']==200)
                    {
                        message.success('添加成功');
                        fref.value.resetFields();
                        context.emit('gbs');
                    }
                    else {
                        message.error(res.data['msg']);
                        fref.value.resetFields();
                    }
                },
                err=>{
                    console.log(err);
                }
            )


            
        };

        const toreset= () =>{
            fref.value.resetFields();
        };


        return{
            formdata,tosubmit,rules,toreset,fref
        }
        
    },
})
</script>
